<template>
  <el-card class="unfold-card">
    <div class="unfold">
      <div>
        <el-image style="width: 180px; height: 180px; border-radius: 180px"
                  :src="avatar"
        />
      </div>
      <div>
        <h3 class="title">{{ getTime() }}好呀{{ userBaseInfo.name }}</h3>
        <p class="subtitle">传染病防控管理系统</p>
      </div>
      <el-descriptions title="主要信息" :column="2" border>
        <!-- 姓名 -->
        <el-descriptions-item
            label="姓名"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.name }}
        </el-descriptions-item>
        <!-- 年龄 -->
        <el-descriptions-item
            label="年龄"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.age }}
        </el-descriptions-item>
        <!-- 性别 -->
        <el-descriptions-item
            label="性别"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.sexText }}
        </el-descriptions-item>
        <!-- 手机号 -->
        <el-descriptions-item
            label="手机号"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.phone }}
        </el-descriptions-item>
        <!-- 邮箱 -->
        <el-descriptions-item
            label="邮箱"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.email }}
        </el-descriptions-item>
        <!-- 生日 -->
        <el-descriptions-item
            label="生日"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.birthday }}
        </el-descriptions-item>
        <!-- 地址 -->
        <el-descriptions-item
            label="地址"
            label-align="center"
            align="center"
        >
          {{ userBaseInfo.address }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>

  <!-- 走马灯 -->
  <el-carousel :interval="4000" type="card" height="280px">
    <el-carousel-item v-for="item in images" :key="item">
      <el-image style="width: 100%; height: 100%" :src="`src/assets/images/home/${item}`" fit="cover"/>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
import {onMounted, reactive, watch} from "vue";
import useUserStore from "@/store/modules/user/user.ts";
import {getTime} from "@/utils/time.ts";
import avatar from '@/assets/images/avatar/avatar.jpg'

const userBaseInfo = reactive({
  name: '',
  age: '',
  sexText: '',
  email: '',
  phone: '',
  birthday: '',
  address: '',
})

// 图片
const images = [
  '0.png', '1.png', '2.png', '3.png', '4.png', '5.png'
]

// 获取用户相关的小仓库
const userStore = useUserStore();

watch(() => userStore.userBaseInfo, (newVal) => {
  for (let key in userBaseInfo) {
    userBaseInfo[key] = newVal[key]
  }
})

// 获取用户信息
onMounted(() => {
  userStore.getUserInfo()
})


</script>

<style lang="scss">
.unfold-card {
  margin-bottom: 2vh;


  .unfold {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}

.title {
  font-size: 30px;
  font-weight: 900;
  font-family: "华文彩云", serif;
  margin-bottom: 30px;
}

.subtitle {
  font-style: italic;
  color: skyblue;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
